<template>
  <div class="custom-container p-5">
    <a-tabs type="card">
      <a-tab-pane key="1" :tab="'解调器状态'" v-if="tabFlag">
        <a-table class="ant-table-striped table1" :loading="tableLoading" :columns="columns" :data-source="dataList"
          size="middle"
          :rowKey="
                                                                                                                                                                            (record, index) => {
                                                                                                                                                                              return index;
                                                                                                                                                                            }
                                                                                                                                                                          "
          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
          <template #action="{ record }">
            {{ record.chn_type == 0 ? '采集' : '采样' }}
          </template>
          <template #actions="{ record }">
            <!-- <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="record.stat == 1" />
                                                                                                    <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else /> -->
            <a-switch v-model:checked="record.stat" :checkedValue="3" :unCheckedValue="0"
              @change="changeSwitch($event,record)" :loading="swithcLoading" />
          </template>
          <template #action1="{ record }">
            <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="record.lock == 1" />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </template>
          <template #action2="{ record }">
            <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="record.de_lock == 1" />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </template>
          <template #action3="{ record }">
            <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="record.demod_lock == 1" />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </template>
          <!-- <template #action4="{ record,index }">
                                                                                                            <a-switch v-model:checked="record.stat" :checkedValue="1" :unCheckedValue="0" @change="changeSwitch(checked,index)" />
                                                                                                          </template> -->
        </a-table>
      </a-tab-pane>
      <template #tabBarExtraContent>
        <a-button type="primary" @click="showModal6()" style="margin-right: 20px">配置总览</a-button>
        <a-button type="primary" @click="open_btn()" style="margin-right: 20px" :loading="swithcLoading"
          v-if="tabFlag">通道全开</a-button>
        <a-button type="primary" @click="close_btn()" :loading="swithcLoading" style="margin-right: 20px"
          v-if="tabFlag">通道全关</a-button>
        <a-select ref="select" v-model:value="appStore.obj.ip" style="width: 145px" :placeholder="'请选择Modem'"
          allowClearget_mset>
          <a-select-option @click="changeck(item.ip, item.label)" :value="checked1" v-for="item in typeOptions"
            :key="item.id">{{
            item.ip
            }}</a-select-option>
        </a-select>
      </template>
    </a-tabs>
  
    <a-tabs type="card" style="margin-top: 30px">
      <a-tab-pane key="1" :tab="'采样数据'" v-if="tabFlag">
        <a-table class="ant-table-striped table1" :loading="tableLoading1" :columns="columns1" :data-source="dataList1"
          size="middle" :rowKey="
                                    (record, index) => {
                                    return index;
                                    }" :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          :pagination="false">
          <template #action="{ text, record, index}">
            <div style="display: flex;align-items: center;justify-content: center;">
              <span style="margin-right: 3px;">
                {{ index+1+(tablePageData1.pageIndex-1)*tablePageData1.pageSize }}
              </span>
              <StarOutlined @click="icon_btn(record)" v-if="record.favorite == 0 || record.favorite == null"
                :style="{fontSize:'20px'}" />
              <StarFilled @click="icon_btn(record)" v-else :style="{fontSize:'20px',color:'#3265cb'}" />
            </div>
          </template>
          <template #action1="{ text, record, index}">
            <a-button type="primary" @click="showModal(record)">详情</a-button>
          </template>
          <template #action2="{ text, record, index}">
            <a-button v-if="record.process_log" type="primary" @click="showModal2(record)">详情</a-button>
          </template>
          <template #action3="{ text, record, index}">
            <div style="background:#00b050;width: 40px;height:20px;margin:auto" v-if="record.do_parsed == 1">IDrect</div>
            <div style="background:yellow;color:#000;width: 40px;height:20px;margin:auto"
              v-if="record.do_parsed == 2 || record.do_parsed == -2">其它
            </div>
          </template>
          <template #action4="{ text, record, index}">
            <a-button type="primary" @click="showModal3(record)" v-if="record.desc">编辑</a-button>
            <a-button @click="showModal3(record)" type="primary" v-else>研判</a-button>
          </template>
          <template #action5="{ text, record, index}">
            <a-button type="primary" v-if="record.output_path" @click="showModal5(record)">详情</a-button>
          </template>
          <template #action6="{ text, record, index}">
            <a-button type="primary" v-if="record.output_path" @click="parsing(record)"
              :loading="parsingLoading">解析</a-button>
          </template>
        </a-table>
        <a-pagination style="float: right; margin: 10px" showTotal show-quick-jumper @change="changePage1" size="small"
          @showSizeChange="changePageSize1" :total="tablePageData1.total" v-model:current="tablePageData1.pageIndex"
          show-size-changer :show-total="total => `共 ${total} 条`" />
      </a-tab-pane>
      <a-tab-pane key="2" :tab="'落盘数据'">
        <a-table class="ant-table-striped table1" :loading="tableLoading2" :columns="columns2" :data-source="dataList2"
          size="middle"
          :rowKey="
                                                                                                                                                                            (record, index) => {
                                                                                                                                                                              return index;
                                                                                                                                                                            }
                                                                                                                                                                          "
          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
          <template #action="{ record }">
            <a-button type="link">修改主体</a-button>
          </template>
          <template #actions="{ text, record, index}">
            <div style="display: flex;align-items: center;justify-content: center;">
              <span style="margin-right: 3px;">
                {{ index+1+(tablePageData2.pageIndex-1)*tablePageData2.pageSize }}
              </span>
              <StarOutlined @click="icon_btn2(record)" v-if="record.favorite == 0 || record.favorite == null"
                :style="{fontSize:'20px'}" />
              <StarFilled @click="icon_btn2(record)" v-else :style="{fontSize:'20px',color:'#3265cb'}" />
            </div>
          </template>
          <template #action1="{ text, record, index}">
            <a-button v-if="record.process_log" type="primary" @click="showModal2(record)">详情</a-button>
          </template>
          <template #action4="{ text, record, index}">
            <a-button type="primary" @click="showModal4(record)" v-if="record.desc">编辑</a-button>
            <a-button @click="showModal4(record)" type="primary" v-else>研判</a-button>
          </template>
          <template #action5="{ text, record, index}">
            <a-button v-if="record.output_path" type="primary" @click="showModal5(record)">详情</a-button>
          </template>
          <template #action6="{ text, record, index}">
            <a-button type="primary" v-if="record.output_path" @click="parsing(record)"
              :loading="parsingLoading">解析</a-button>
          </template>
        </a-table>
        <a-pagination style="float: right; margin: 10px" show-quick-jumper @change="changePage2"
          @showSizeChange="changePageSize2" size="small" :total="tablePageData2.total"
          v-model:current="tablePageData2.pageIndex" show-size-changer :show-total="total => `共 ${total} 条`" />
      </a-tab-pane>
    </a-tabs>
    <a-modal v-model:visible="visible" title="数据详情" @ok="handleOk" width="1535px" :footer="null" @afterClose="afterClose">
      <a-table :dataSource="tableData" :columns="columns3" :pagination="false">
        <template #action="{ text, record, index}">
          <p>{{ index+1+(tablePageData3.pageIndex-1)*tablePageData3.pageSize }}</p>
        </template>
      </a-table>
      <a-pagination style="float: right; margin: 10px" show-quick-jumper @change="changePage3"
        @showSizeChange="changePageSize3" size="small" :total="tablePageData3.total"
        v-model:current="tablePageData3.pageIndex" show-size-changer :show-total="total => `共 ${total} 条`" />
    </a-modal>
    <a-modal v-model:visible="visible2" title="数据详情" width="1000px" @ok="handleOk2" centered
      :bodyStyle="{ backgroundColor: '#252525',padding:'30px 30px', color:'#fff',boxSizing:'border-box'}" :footer="null">
      <p style="margin-bottom: 0;">{{str}}</p>
    </a-modal>
    <a-modal v-model:visible="visible3" title="研判详情" @ok="handleOk2" centered width="720px" @cancel="save_btn"
      :bodyStyle="{ backgroundColor: '#252525',padding:'30px 30px', color:'#fff',boxSizing:'border-box'}" :footer="null">
      <div style="display: flex;justify-content: space-between;align-items: flex-end;">
        <textarea id="story" name="story" rows="5" cols="33">{{textareaData}}</textarea>
        <a-button @click="save_btn">保存</a-button>
      </div>
    </a-modal>
    <a-modal v-model:visible="visible4" title="研判详情" @ok="handleOk2" centered width="720px" @cancel="save_btn2"
      :bodyStyle="{ backgroundColor: '#252525',padding:'30px 30px', color:'#fff',boxSizing:'border-box'}" :footer="null">
      <div style="display: flex;justify-content: space-between;align-items: flex-end;">
        <textarea id="story2" name="story2" rows="5" cols="33">{{textareaData2}}</textarea>
        <a-button @click="save_btn2">保存</a-button>
      </div>
    </a-modal>
    <a-modal v-model:visible="visible5" title="数据详情" @ok="handleOk" width="1535px" :footer="null"
      @afterClose="afterClose">
      <a-table :dataSource="computedValue" :loading="tableLoading5" :columns="columns4" :pagination="false">
        <template #filterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
          <div style="padding: 8px">
            <a-input ref="searchInput" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;background:#fff !important"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" :class="{'custom-placeholder': true}"
              @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)" />
            <a-button type="primary" size="small" style="width: 90px; margin-right: 8px"
              @click="handleSearch(selectedKeys, confirm, column.dataIndex)">
              <template #icon>
                <SearchOutlined style="font-size: 14px; color: #fff" />
              </template>
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
              重置
            </a-button>
          </div>
        </template>
        <template #filterIcon="filtered">
          <search-outlined :style="{ color: filtered ? '#fff' : undefined }" />
        </template>
  
        <template #customRender="{ text, column }">
          <span v-if="searchText && searchedColumn === column.dataIndex">
            <template
              v-for="(fragment, i) in text
                                                                                                      .toString()
                                                                                                      .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
              <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" class="highlight" :key="i">
                {{ fragment }}
              </mark>
              <template v-else>{{ fragment }}</template>
            </template>
          </span>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
      <!-- showSizeChange更新每页条数 -->
      <!-- change更新当前页 -->
      <a-pagination style="float: right; margin: 10px" show-quick-jumper @change="changePage4"
        @showSizeChange="changePageSize4" size="small" :total="tablePageData4.total"
        v-model:current="tablePageData4.pageIndex" show-size-changer :show-total="total => `共 ${tableData2.length} 条`" />
    </a-modal>
    <a-modal v-model:visible="visible6" title="配置详情" @ok="handleOk2" centered width="1535px"
      :bodyStyle="{ backgroundColor: '#252525',padding:'30px 0', color:'#fff',boxSizing:'border-box'}" :footer="null">
      <div v-if="mtype == 'MT710A'">
        <div class="table_div" v-for="item,index in chn_data" :key="item.id">
          <div style="width: 100%;display: flex;justify-content: center;margin-left: 0;">
            <div style="width: 100%;;border: 1px dashed #fff;margin-bottom: 20px;margin-top: 10px;margin-left: 0;"></div>
          </div>
          <div style="padding: 0 15px;width: 100%;display: flex;flex-wrap: wrap">
            <div>
              <p>当前调制通道：</p><span>通道{{ item.chn }}</span><!--通道-->
            </div>
            <div>
              <p>通道模式：</p><span>{{ item.chn_type == 1 ? '采样' : '采集' }}</span><!--通道模式-->
            </div>
            <div>
              <p>采集开关：</p><span>{{ item.status != 0 ? '开启' : '关闭' }}</span><!--采集开关-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>频率：</p><span>{{ item.f }}</span><!--频率-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>符号速率：</p><span>{{ item.rt }}</span><!--符号速率-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>频谱反转：</p><span>{{ selectSi?.[item.si]?.name }}</span>
            </div>
            <div v-if="item.chn_type != 1">
              <p>射频输入：</p><span>{{ item.rfin }}</span><!--射频输入-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>滚降系数：</p><span>{{ item.rdc }}</span><!--滚降系数-->
            </div>
            <div>
              <p>输出主机IP：</p><span>{{ outsetParams[index].sip }}</span><!--输出主机IP-->
            </div>
            <div>
              <p>输出源端口：</p><span>{{ outsetParams[index].sport }}</span><!--输出源端口-->
            </div>
            <div>
              <p>输出数据格式：</p><span>{{ outType?.[outsetParams[index]?.out_type]?.name }}</span>
            </div>
            <div>
              <p>BB帧时标：</p><span>{{ bbfData?.[outsetParams?.[index].bbf]?.name }}</span>
            </div>
            <div>
              <p>输出目的IP：</p><span>{{ outsetParams[index].out_dest_ip }}</span><!--输出目的IP-->
            </div>
            <div>
              <p>输出目的端口：</p><span>{{ outsetParams[index].dport }}</span><!-- 输出目的端口-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>数据处理方式：</p><span>{{ dataProcessingData.find(item => item.id === savesetParams[index]?.data_processing)?.name }}</span>
            </div>
            <div>
              <p>输出文件大小：</p><span>{{ savesetParams[index].file_size }}</span><!--输出文件大小-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>输出文件个数：</p><span>{{ savesetParams[index].file_count }}</span><!--输出文件个数-->
            </div>
            <div>
              <p>删除流文件方式：</p><span>{{ delbinData?.[savesetParams[index]?.delbin]?.name }}</span>
            </div>
            <div v-if="item.chn_type != 1">
              <p>输出文件路径：</p><span>{{ savesetParams[index].output_path }}</span><!--输出文件路径-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>流转发IP：</p><span>{{ savesetParams[index].stream_ip }}</span><!--流转发IP-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>流转发端口：</p><span>{{ savesetParams[index].stream_port }}</span><!--流转发端口-->
            </div>
            <div v-if="item.chn_type != 1">
              <p>卫星名称：</p><span>{{ savesetParams[index].sat_name }}</span><!--卫星名称-->
            </div>
            <div v-if="item.chn_type != 1">
  
            </div>
            <div v-if="item.chn_type != 1">
              <p>方向指示：</p><span>{{ directData?.[savesetParams[index]?.direct]?.name }}</span>
            </div>
            <div v-if="item.chn_type != 1">
              <p>HDLC类型指示：</p><span>{{ hdlcTypeData.value?.[savesetParams.value[index]?.hdlc_type]?.name }}</span>
            </div>
            <div>
              <p>采样时间：</p><span>{{ savesetParams[index].file_time }}</span><!--采样时间-->
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="table_div" v-for="item,index in chn_data2">
          <div style="width: 100%;display: flex;justify-content: center;margin-left: 0;">
            <div style="width: 100%;;border: 1px dashed #fff;margin-bottom: 20px;margin-top: 10px;margin-left: 0;"></div>
          </div>
          <div style="padding: 0 15px;width: 100%;display: flex;flex-wrap: wrap" v-if="item">
            <div>
              <p>当前调制通道：</p><span>通道{{ item.chn }}</span><!--通道-->
            </div>
            <div>
              <p>采集开关：</p><span>{{ item.status != 0 ? '开' : '关' }}</span><!--采集开关-->
            </div>
            <div>
              <p>监听IP：</p><span>{{ item.listen_ip }}</span><!--监听IP：-->
            </div>
            <div>
              <p>监听端口：</p><span>{{ item.listen_port }}</span><!--监听端口：-->
            </div>
            <div>
              <p>数据类型：</p><span>{{ item.data_type == 2 ? 'hdlc' : 'e1' }}</span><!--数据类型：-->
            </div>
            <div>
              <p>数据处理方式：</p><span>{{ item.data_processing == 1 ? 'file' : 'stream' }}</span><!--数据处理方式：-->
            </div>
            <div>
              <p>输出文件大小：</p><span>{{ item.file_size }}</span><!--输出文件大小：-->
            </div>
            <div>
              <p>输出文件个数：</p><span>{{ item.file_count }}</span><!--输出文件个数：-->
            </div>
            <div>
              <p>输出文件路径：</p><span>{{ item.output_path }}</span><!--输出文件路径：-->
            </div>
            <div>
              <p>删除流文件：</p><span>{{ item.delbin ==0 ? '保留' : '删除' }}</span><!--删除流文件：-->
            </div>
            <div>
              <p>流转发IP：</p><span>{{ item.stream_ip }}</span><!--流转发IP：-->
            </div>
            <div>
              <p>流转发端口：</p><span>{{ item.stream_port }}</span><!--流转发端口：-->
            </div>
            <div>
              <p>信号载波频率：</p><span>{{ item.fc }}</span><!--信号载波频率：-->
            </div>
            <div>
              <p>信号信息速率：</p><span>{{ item.rs }}</span><!--信号信息速率：-->
            </div>
            <div>
              <p>卫星名称：</p><span>{{ item.sat_name }}</span><!--卫星名称：-->
            </div>
            <div>
              <p>极化方式：</p><span>{{ item.polar == 0 ? 'H极化' : 'V极化' }}</span><!--极化方式：-->
            </div>
            <div>
              <p>方向指示：</p><span>{{ item.direct == 0 ? '上行' : '下行' }}</span><!--方向指示：-->
            </div>
            <div v-if="item.hdlc_type == 0">
              <p>HDLC类型指示：</p><span>标准HDLC</span><!--HDLC类型指示：-->
            </div>
            <div v-if="item.hdlc_type == 1">
              <p>HDLC类型指示：</p><span>非标HDLC</span><!--HDLC类型指示：-->
            </div>
            <div v-if="item.hdlc_type == 2">
              <p>HDLC类型指示：</p><span>非标HDLC2</span><!--HDLC类型指示：-->
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch, onBeforeUnmount, h, computed, toRefs } from 'vue';
import { get_log, set_signal_content } from '/@/api/biz/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { get_channel, set_statu, set_resultdesc, set_resultfavorite, set_status, get_ipinfo, set_custom, get_chnset1, get_chnset2, get_outset, get_saveset, get_term } from "/@/api/biz/index";
import { useAppStore } from '/@/store/modules/app.ts';
import { Icon } from '/@/components/Icon';
import { StarOutlined, StarFilled, SearchOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import axios from 'axios'
// import { tableList } from './mockData.js'
import { S } from 'mockjs';

export default defineComponent({
  components: {
    Icon, StarOutlined, StarFilled, SearchOutlined
  },
  setup() {
    const chnsetParams = reactive({
      ip: '',
      chn: '',//
      ena: 1,//通道开关
      rfin: undefined,//频谱反转
      f: undefined,//频率
      rdc: undefined,//滚降系数
      si: undefined,//频谱反转
      rt: undefined,//符号速率
      chn_type: ''
    });
    const savesetParams = ref(
      {
        ip: '',
        chn: 1,
        data_processing: undefined,  // 数据处理方式
        file_size: undefined,  // 文件大小
        file_count: undefined,  // 文件数量
        output_path: '',  // 输出文件路径
        stream_ip: '',  // 流转发IP
        stream_port: undefined,  // 流转发端口
        sat_name: undefined,  // 卫星名称，比如75.5度，实际输入为75.5*100=7550
        polar: undefined,  // 极化方式，0x00：H极化，0x01：V极化
        direct: undefined,  // 方向指示: 0:上行,1:下行
        hdlc_type: undefined,  // HDLC类型指示: 0:标准HDLC,1:非标HDLC
        delbin: undefined,
      }//删除流文件方式
    );
    const outsetParams = ref({
      ip: '',
      chn: 1,//
      sip: undefined,//输出主机IP
      sport: null,//输出源端口
      out_type: undefined,//输出格式
      bbf: undefined,//BB帧时标
      out_dest_ip: undefined,//输出目的IP
      dport: null,//输出目的端口
    });
    const queryParams = reactive({
      cpn: 1,
      epc: 10,
    });
    let tableData = ref([
      // {
      //   key: '1',
      //   name: 'network id',
      //   age: 32,
      //   address: '西湖区湖底公园1号',
      // },
      // {
      //   key: '2',
      //   name: 'group id',
      //   age: 42,
      //   address: '西湖区湖底公园1号',
      // },
    ])
    let tableData2 = ref([
      // {
      //     "头部长度": 10,
      //     "协议": 155,
      //     "总长度": 14849,
      //     "源地址": "29.198.27.149",
      //     "目的地址": "100.172.184.119",
      //     "校验和": 10564,
      //     "TTL": 123,
      //     "offset": 114704
      // },
      // {
      //     "头部长度": 6,
      //     "协议": 212,
      //     "总长度": 57938,
      //     "源地址": "99.235.125.114",
      //     "目的地址": "40.84.99.58",
      //     "校验和": 25826,
      //     "TTL": 86,
      //     "offset": 114723
      // },
      // {
      //     "头部长度": 14,
      //     "协议": 86,
      //     "总长度": 57298,
      //     "源地址": "97.73.60.122",
      //     "目的地址": "134.233.158.248",
      //     "校验和": 51871,
      //     "TTL": 110,
      //     "offset": 114775
      // }
    ])
    let columns4 = ref([
      // {
      //     title: '头部长度',
      //     dataIndex: '头部长度',
      //     key: '头部长度',
      //     align: 'center',
      //     slots: {
      //         filterDropdown: 'filterDropdown',
      //         filterIcon: 'filterIcon',
      //         customRender: 'customRender',
      //     },
      //     onFilter: (value, record) => {
      //         console.log(record,record.value,record.name, 'record')
      //         return record.头部长度.toString().toLowerCase().includes(value.toLowerCase())
      //     },
      //         // record.name.toString().toLowerCase().includes(value.toLowerCase()),
      //     onFilterDropdownVisibleChange: visible => {
      //         if (visible) {
      //             setTimeout(() => {
      //                 console.log(searchInput.value);
      //                 searchInput.value.focus();
      //             }, 100);
      //         }
      //     },

      //     // slots: { customRender: 'action' },
      //     sorter: (a, b) => a.头部长度 - b.头部长度,
      // },
      {
        title: '源地址',
        dataIndex: '源地址',
        key: '源地址',
        align: 'center',
        // slots: {
        //   filterDropdown: 'filterDropdown',
        //   filterIcon: 'filterIcon',
        //   customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //   console.log(record, record.value, record.name, 'record')
        //   return record.源地址.toString().toLowerCase().includes(value.toLowerCase())
        // },
        // // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //   if (visible) {
        //     setTimeout(() => {
        //       console.log(searchInput.value);
        //       searchInput.value.focus();
        //     }, 100);
        //   }
        // },
        sorter: (a, b) => ipToNumber(a.源地址) - ipToNumber(b.源地址),
      },
      {
        title: '目的地址',
        dataIndex: '目的地址',
        key: '目的地址',
        align: 'center',
        // slots: {
        //   filterDropdown: 'filterDropdown',
        //   filterIcon: 'filterIcon',
        //   customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //   console.log(record, record.value, record.name, 'record')
        //   return record.目的地址.toString().toLowerCase().includes(value.toLowerCase())
        // },
        // // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //   if (visible) {
        //     setTimeout(() => {
        //       console.log(searchInput.value);
        //       searchInput.value.focus();
        //     }, 100);
        //   }
        // },
        sorter: (a, b) => ipToNumber(a.目的地址) - ipToNumber(b.目的地址),
      },
      {
        title: '协议',
        dataIndex: '协议',
        key: '协议',
        // slots: {
        //     filterDropdown: 'filterDropdown',
        //     filterIcon: 'filterIcon',
        //     customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //     console.log(record,record.value,record.name, 'record')
        //     return record.协议.toString().toLowerCase().includes(value.toLowerCase())
        // },
        //     // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //     if (visible) {
        //         setTimeout(() => {
        //             console.log(searchInput.value);
        //             searchInput.value.focus();
        //         }, 100);
        //     }
        // },
        sorter: (a, b) => a.协议 - b.协议,
        align: 'center'
      },
      {
        title: '总长度',
        dataIndex: '总长度',
        key: '总长度',
        align: 'center',
        // slots: {
        //     filterDropdown: 'filterDropdown',
        //     filterIcon: 'filterIcon',
        //     customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //     console.log(record,record.value,record.name, 'record')
        //     return record.总长度.toString().toLowerCase().includes(value.toLowerCase())
        // },
        //     // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //     if (visible) {
        //         setTimeout(() => {
        //             console.log(searchInput.value);
        //             searchInput.value.focus();
        //         }, 100);
        //     }
        // },
        sorter: (a, b) => a.总长度 - b.总长度,
      },

      // {
      //     title: '校验和',
      //     dataIndex: '校验和',
      //     key: '校验和',
      //     align: 'center',
      //     // slots: {
      //     //     filterDropdown: 'filterDropdown',
      //     //     filterIcon: 'filterIcon',
      //     //     customRender: 'customRender',
      //     // },
      //     // onFilter: (value, record) => {
      //     //     console.log(record,record.value,record.name, 'record')
      //     //     return record.校验和.toString().toLowerCase().includes(value.toLowerCase())
      //     // },
      //     //     // record.name.toString().toLowerCase().includes(value.toLowerCase()),
      //     // onFilterDropdownVisibleChange: visible => {
      //     //     if (visible) {
      //     //         setTimeout(() => {
      //     //             console.log(searchInput.value);
      //     //             searchInput.value.focus();
      //     //         }, 100);
      //     //     }
      //     // },
      //     sorter: (a, b) => a.校验和 - b.校验和,
      // },
      {
        title: 'TTL',
        dataIndex: 'TTL',
        key: 'TTL',
        align: 'center',
        // slots: {
        //     filterDropdown: 'filterDropdown',
        //     filterIcon: 'filterIcon',
        //     customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //     console.log(record,record.value,record.name, 'record')
        //     return record.TTL.toString().toLowerCase().includes(value.toLowerCase())
        // },
        //     // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //     if (visible) {
        //         setTimeout(() => {
        //             console.log(searchInput.value);
        //             searchInput.value.focus();
        //         }, 100);
        //     }
        // },
        sorter: (a, b) => a.TTL - b.TTL,
      },
      {
        title: '位置',
        dataIndex: 'offset',
        key: 'offset',
        align: 'center',
        // slots: {
        //     filterDropdown: 'filterDropdown',
        //     filterIcon: 'filterIcon',
        //     customRender: 'customRender',
        // },
        // onFilter: (value, record) => {
        //     console.log(record,record.value,record.name, 'record')
        //     return record.offset.toString().toLowerCase().includes(value.toLowerCase())
        // },
        //     // record.name.toString().toLowerCase().includes(value.toLowerCase()),
        // onFilterDropdownVisibleChange: visible => {
        //     if (visible) {
        //         setTimeout(() => {
        //             console.log(searchInput.value);
        //             searchInput.value.focus();
        //         }, 100);
        //     }
        // },
        sorter: (a, b) => a.offset - b.offset,
      },
    ])
    let columns3 = ref([
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        algin: 'center',
        slots: { customRender: 'action' },
      },
      {
        title: '网络ID',
        dataIndex: 'network_id',
        key: 'name',
        algin: 'center'
      },
      {
        title: '入向组ID',
        dataIndex: 'group_id',
        key: 'age',
        algin: 'center'
      },
      {
        title: '调制编码序号',
        dataIndex: 'modcod_id',
        key: 'age',
        algin: 'center'
      },
      {
        title: '符号速率',
        dataIndex: 'symbol_rate',
        key: 'address',
        algin: 'center'
      },
      {
        title: '突发占用时间',
        dataIndex: 'burst_time',
        key: 'address',
        algin: 'center'
      },
      {
        title: '编码码率',
        dataIndex: 'code_rate',
        key: 'address',
        algin: 'center'
      },
      {
        title: '信息长度',
        dataIndex: 'info_len',
        key: 'address',
        algin: 'center'
      },
      {
        title: '调制方式',
        dataIndex: 'mode_type',
        key: 'address',
        algin: 'center'
      },
      {
        title: '导频符号个数',
        dataIndex: 'pilot_symb_num',
        key: 'address',
        algin: 'center'
      },
      {
        title: '载波表示',
        dataIndex: 'carrier_id',
        key: 'address',
        algin: 'center'
      },
      {
        title: '载波上行频率',
        dataIndex: 'frequp',
        key: 'address',
        algin: 'center'
      },
      {
        title: '信号规格编号',
        dataIndex: 'sig_id',
        key: 'address',
        algin: 'center'
      },
    ])
    function ipToNumber(ip) {
      // 将 IP 地址的四个部分分割成数组，然后转换为整数并连接成一个大的数字字符串  
      // return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);  
      // 移除点并转换为整数  
      return parseInt(ip.replace(/\./g, ''), 10);
    }
    let chn_data = ref([])
    let chn_data2 = ref([])
    let selectSi = ref([])
    let outType = ref([])
    let bbfData = ref([])
    let delbinData = ref([])
    let polarData = ref([])
    let directData = ref([])
    let hdlcTypeData = ref([])
    let dataProcessingData = ref([])
    // 定义一个异步函数 get_chn，用于获取多个数据集
    async function get_chn() {
      // 调用 get_chnset1 函数，传入 mtype 参数，并等待其返回结果
      await get_chnset1({ mtype: mtype.value }).then((res) => {
        // 将返回的数据赋值给 chn_data 变量
        chn_data.value = res.data.data.result.data
      })

      // 调用 get_outset 函数，传入 appStore 对象的 ip 属性，并等待其返回结果
      await get_outset({ ip: appStore.obj.ip }).then((res) => {
        // 将返回的数据赋值给 outsetParams 变量
        outsetParams.value = res.data.data.result.data
      })

      // 调用 get_saveset 函数，传入 appStore 对象的 ip 属性，并等待其返回结果
      await get_saveset({ ip: appStore.obj.ip }).then((res) => {
        // 将返回的数据赋值给 savesetParams 变量
        savesetParams.value = res.data.data.result.data
      })

      // 调用 get_term 函数，传入空对象，并等待其返回结果
      await get_term({}).then((res) => {
        // 将返回的数据中 SELECT 对象的各个属性分别赋值给对应的变量
        selectSi.value = res.data.data.result.data.SELECT.si.select;
        outType.value = res.data.data.result.data.SELECT.out_type.select;
        bbfData.value = res.data.data.result.data.SELECT.bbf.select;
        delbinData.value = res.data.data.result.data.SELECT.delbin.select;
        polarData.value = res.data.data.result.data.SELECT.polar.select;
        directData.value = res.data.data.result.data.SELECT.direct.select;
        hdlcTypeData.value = res.data.data.result.data.SELECT.hdlc_type.select;
        dataProcessingData.value = res.data.data.result.data.SELECT.data_processing.select;
        console.log(dataProcessingData.value[1]?.name,'dataProcessingData0-0-=')
      })
    }

    // 定义一个函数 get_chn2，用于获取另一个数据集
    function get_chn2() {
      // 调用 get_chnset2 函数，传入 appStore 对象的 ip 属性，并处理返回结果
      get_chnset2({ ip: appStore.obj.ip }).then((res) => {
        // 将返回的数据中不为 null 的项过滤出来，并赋值给 chn_data2 变量
        chn_data2.value = res.data.data.result.data.filter(item => item !== null)
      })
    }

    // 定义一个响应式对象 tablePageData3，用于存储表格分页信息
    const tablePageData3 = ref({
      pageIndex: 1, // 当前页码，默认为 1
      pageSize: 10, // 每页显示的记录数，默认为 10
      total: 0 // 总记录数，默认为 0
    })

    // 定义多个响应式布尔变量，用于控制不同对话框的显示状态
    const visible = ref<boolean>(false); // 控制第一个对话框的显示状态，默认为 false
    const visible2 = ref<boolean>(false); // 控制第二个对话框的显示状态，默认为 false
    const visible3 = ref<boolean>(false); // 控制第三个对话框的显示状态，默认为 false
    const visible5 = ref<boolean>(false); // 控制第五个对话框的显示状态，默认为 false

    // 定义一个响应式变量 searchInput，用于存储搜索输入框的值
    const searchInput = ref();


    // 自定义筛选菜单START
    const state = reactive({
      searchText: '',
      searchedColumn: '',
    });

    // 定义一个函数 handleSearch，用于处理搜索操作
    const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm(); // 确认搜索操作
      state.searchText = selectedKeys[0]; // 将选中的搜索关键字赋值给 state.searchText
      state.searchedColumn = dataIndex; // 将搜索的列索引赋值给 state.searchedColumn
    }

    // 定义一个函数 handleReset，用于重置搜索条件
    const handleReset = clearFilters => {
      clearFilters(); // 清除过滤条件
      state.searchText = ''; // 将搜索文本清空
    };

    // 定义一个响应式对象 record_content，用于存储当前显示的记录内容
    let record_content = ref({})

    // 定义一个函数 showModal，用于显示模态框并获取记录内容
    const showModal = (record) => {
      record_content.value = record; // 将传入的记录赋值给 record_content
      // 调用 set_signal_content 函数，传入记录的 id 和分页信息，获取数据
      set_signal_content({ rid: record.id, epc: tablePageData3.value.pageSize, cpn: tablePageData3.value.pageIndex }).then(res => {
        tablePageData3.value.total = res.data.data.result.data_count; // 更新总记录数
        tableData.value = res.data.data.result.data; // 更新表格数据
      })
      visible.value = true; // 显示模态框
    };

    // 定义两个响应式布尔变量，用于控制表格和解析操作的加载状态
    const tableLoading5 = ref(false)
    const parsingLoading = ref(false)

    // 定义一个函数 parsing，用于执行解析操作
    const parsing = (record) => {
      parsingLoading.value = true; // 设置解析操作为加载状态
      // 调用 set_custom 函数，传入记录的输出路径，执行自定义脚本
      set_custom({ file: record.output_path }).then((res) => {
        if (res.data.data.result.data.code == 200) {
          message.success('自定义脚本执行成功'); // 显示成功消息
          parsingLoading.value = false; // 解除加载状态
        } else {
          message.error('自定义脚本执行失败'); // 显示失败消息
          parsingLoading.value = false; // 解除加载状态
        }
      })
    }

    // 定义一个函数 showModal5，用于显示第五个模态框并获取 IP 信息
    const showModal5 = (record) => {
      tableLoading5.value = true; // 设置表格加载状态为 true
      visible5.value = true; // 显示第五个模态框
      // 调用 get_ipinfo 函数，传入记录的输出路径，获取 IP 信息
      get_ipinfo({ file: record.output_path }).then((res) => {
        // 检查返回的数据长度是否大于 0
        if (res.data.data.result.data.data.length > 0) {
          tableData2.value = res.data.data.result.data.data; // 更新表格数据
          tablePageData4.value.total = tableData2.value.length; // 更新总记录数
          tableLoading5.value = false; // 解除加载状态
        } else {
          message.error(res.data.data.result.data.message); // 显示错误消息
          tableLoading5.value = false; // 解除加载状态
          tableData2.value = []; // 清空表格数据
          tablePageData4.value.total = tableData2.value.length; // 更新总记录数
        }
      }).catch(() => {
        tableLoading5.value = false; // 解除加载状态
        tableData2.value = []; // 清空表格数据
        tablePageData4.value.total = tableData2.value.length; // 更新总记录数
      });
    };

    // 定义一个响应式布尔变量 visible6，用于控制第六个模态框的显示状态
    let visible6 = ref(false);

    // 定义一个函数 showModal6，用于显示第六个模态框并根据 mtype 获取数据
    const showModal6 = () => {
      visible6.value = true; // 显示第六个模态框
      // 根据 mtype 的值调用不同的函数获取数据
      if (mtype.value == 'MT710A') {
        get_chn(); // 调用 get_chn 函数
      } else if (mtype.value == 'MT650S') {
        get_chn2(); // 调用 get_chn2 函数
      }
    };

    // 定义一个响应式对象 tablePageData4，用于存储第四个表格的分页信息
    const tablePageData4 = ref({
      pageIndex: 1, // 当前页码，默认为 1
      pageSize: 10, // 每页显示的记录数，默认为 10
      total: tableData2.value.length // 总记录数，默认为表格数据的长度
    });

    // 定义一个响应式字符串变量 str，用于存储处理日志
    let str = ref('');

    // 定义一个函数 showModal2，用于显示第二个模态框并显示记录的处理日志
    const showModal2 = (record) => {
      str.value = record.process_log; // 将记录的处理日志赋值给 str
      visible2.value = true; // 显示第二个模态框
    };


    // 定义一个函数 icon_btn，用于处理记录的收藏状态
    const icon_btn = (record) => {
      // 检查记录的 favorite 属性是否为 0 或 null
      if (record.favorite == 0 || record.favorite == null) {
        record.favorite = 1; // 如果是，则将其设置为 1（表示收藏）
      } else {
        record.favorite = 0; // 否则，将其设置为 0（表示取消收藏）
      }
      // 调用 set_resultfavorite 函数，传入记录的 id 和新的 favorite 状态
      set_resultfavorite({ rid: record.id, favorite: record.favorite }).then((res) => {
        // 检查响应数据中的代码是否为 200
        if (res.data.data.result.data.code == 200) {
          message.success('操作成功'); // 显示成功消息
          sampl(); // 调用 sampl 函数，可能是用于刷新数据或执行其他操作
        } else {
          message.success(res.data.data.result.data.message); // 显示响应中的消息
        }
      })
    }

    // 定义一个函数 icon_btn2，用于处理记录的收藏状态
    const icon_btn2 = (record) => {
      // 检查记录的 favorite 属性是否为 0 或 null
      if (record.favorite == 0 || record.favorite == null) {
        record.favorite = 1; // 如果是，则将其设置为 1（表示收藏）
      } else {
        record.favorite = 0; // 否则，将其设置为 0（表示取消收藏）
      }
      // 调用 set_resultfavorite 函数，传入记录的 id 和新的 favorite 状态
      set_resultfavorite({ rid: record.id, favorite: record.favorite }).then((res) => {
        // 检查响应数据中的代码是否为 200
        if (res.data.data.result.data.code == 200) {
          message.success('操作成功'); // 显示成功消息
          rockfall(); // 调用 rockfall 函数，可能是用于刷新数据或执行其他操作
        } else {
          message.success(res.data.data.result.data.message); // 显示响应中的消息
        }
      })
    }


    // 定义一个响应式字符串变量 textareaData，用于存储文本区域的内容
    let textareaData = ref('')

    // 定义一个响应式字符串变量 descId，用于存储当前记录的描述 ID
    let descId = ref('')

    // 定义一个函数 showModal3，用于显示第三个模态框并设置文本区域的内容
    const showModal3 = (record) => {
      let textarea = document.getElementById('story'); // 获取 ID 为 'story' 的文本区域元素
      visible3.value = true // 显示第三个模态框
      textareaData.value = record.desc // 将记录的描述赋值给 textareaData
      descId.value = record.id // 将记录的 ID 赋值给 descId
      textarea.value = record.desc // 设置文本区域的内容为记录的描述
    }

    // 定义一个响应式布尔变量 visible4，用于控制第四个模态框的显示状态
    let visible4 = ref(false)

    // 定义一个响应式字符串变量 textareaData2，用于存储第二个文本区域的内容
    let textareaData2 = ref('')

    // 定义一个函数 showModal4，用于显示第四个模态框并设置第二个文本区域的内容
    const showModal4 = (record) => {
      let textarea = document.getElementById('story2'); // 获取 ID 为 'story2' 的文本区域元素
      visible4.value = true // 显示第四个模态框
      textareaData2.value = record.desc // 将记录的描述赋值给 textareaData2
      descId.value = record.id // 将记录的 ID 赋值给 descId
      textarea.value = record.desc // 设置文本区域的内容为记录的描述
    }

    // 定义一个函数 afterClose，用于模态框关闭后的操作
    const afterClose = () => {
      tablePageData3.pageIndex = 1 // 重置分页索引为 1
      tablePageData3.pageSize = 10 // 重置每页显示的记录数为 10
      tablePageData3.total = 0 // 重置总记录数为 0
    }

    // 定义一个函数 changePage3，用于改变分页并重新显示模态框
    const changePage3 = (pageIndex) => {
      tablePageData3.value.pageIndex = pageIndex // 更新分页索引
      showModal(record_content.value) // 重新显示模态框，传入当前记录内容
    }

    const computedValue = computed(() => {
      //每页显示数据条数
      const start = (tablePageData4.value.pageIndex - 1) * tablePageData4.value.pageSize;
      //返回当前页数据：tablePageData4.value.pageSize是当前数据条数
      return tableData2.value.slice(start, start + tablePageData4.value.pageSize);
    });
    // 页数发生变化时动态更新tablePageData4.value.pageIndex
    const changePage4 = (pageIndex) => {
      tablePageData4.value.pageIndex = pageIndex
    }

    // 显示数据条数发生变化时动态更新tablePageData4.value.pageSize，并返回第一页
    const changePageSize4 = (current, size) => {
      tablePageData4.value.pageIndex = 1
      tablePageData4.value.pageSize = size
    }
    const changePageSize3 = (current, size) => {
      tablePageData3.value.pageIndex = 1
      tablePageData3.value.pageSize = size

      showModal(record_content.value)
    }

    const handleOk = (e: MouseEvent) => {
      visible.value = false;
    };
    const handleOk2 = (e: MouseEvent) => {
      visible2.value = false;
    };
    const tableLoading: Boolean = ref(true)
    const tableLoading1: Boolean = ref(true)
    const tableLoading2: Boolean = ref(true)
    const { t } = useI18n();
    const appStore = useAppStore();
    const columns = [
      {
        title: t('routes.demo.inet.channel_number'),
        align: "center",
        dataIndex: 'chn',
      },
      {
        title: t('routes.demo.inet.center_frequency'),
        align: "center",
        dataIndex: 'cf',
      },
      {
        title: t('routes.demo.inet.symbol_rate'),
        align: "center",
        dataIndex: "rt"
      },
      {
        title: t('routes.demo.inet.channel_locking'),
        align: "center",
        dataIndex: 'lock',
        slots: { customRender: 'action1' },
      },
      {
        title: t('routes.demo.inet.decoding_lock'),
        align: "center",
        dataIndex: 'de_lock',
        slots: { customRender: 'action2' },
      },
      {
        title: t('routes.demo.inet.demodulation_lock'),
        align: "center",
        dataIndex: 'demod_lock',
        slots: { customRender: 'action3' },
      },
      {
        title: t('routes.demo.inet.signal_power'),
        align: "center",
        dataIndex: 'sp',
      },
      {
        title: t('routes.demo.inet.signal_to_noise_ratio'),
        align: "center",
        dataIndex: 'snr',

      },
      {
        title: t('routes.demo.inet.error_rate'),
        align: "center",
        dataIndex: 'ser',

      },
      {
        title: t('routes.demo.inet.frequency_offset'),
        align: "center",
        dataIndex: 'fs',
      },
      // {
      //   title: '采集开关',
      //   align: "center",
      //   dataIndex: 'stat',
      //   slots: { customRender: 'action4' },
      // },
      {
        title: '用途',
        align: "center",
        dataIndex: 'chn_type',
        slots: { customRender: 'action' },
      },
      {
        title: '开关',
        align: "center",
        dataIndex: 'stat',
        slots: { customRender: 'actions' },
      },

    ]
    const queryParams3 = ref({
      cpn: 1,
      epc: 10,
      ip: '192.168.3.172',
    })
    queryParams3.ip = appStore.obj.ip
    const dataList = ref([
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      //   rts:0
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      //   rts:1
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      // },
      // {
      //   item1: '--', //中心频率
      //   item2: '--', //Modulation
      //   item3: '--', //符号速率
      //   item4: '--', //信噪比
      //   item5: '--', //标准
      //   item6: '--', //Pilots
      //   item7: '--', //编码方式
      //   item8: '--', //Puncture_rate
      //   item9: '--', //帧长类型
      //   item10: '--', //滚降系数
      //   item11: '--', //滚降系数
      // },
    ]);
    // 定义一个异步函数 getList3，用于获取频道列表
    async function getList3() {

      // 调用 get_channel 函数，传入 IP 地址，获取频道数据
      get_channel({ ip: queryParams3.ip }).then(res => {
        // 检查返回的数据长度是否大于 0
        if (res.data.data.result.data.length > 0) {
          dataList.value = res.data.data.result.data; // 将返回的数据赋值给 dataList

          // 遍历 dataList 中的每一项
          dataList.value.forEach((item, index) => {
            // 如果 item 的 stat 属性不等于 0，则将其设置为 3
            if (item.stat != 0) {
              item.stat = 3;
            } else {
              // 否则，将其设置为 0
              item.stat = 0;
            }
          });

          tableLoading.value = false; // 设置表格加载状态为 false
          swithcLoading.value = false; // 设置开关加载状态为 false
        }
        // 检查返回的数据代码是否为 500 或 502
        else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
          dataList.value = []; // 清空 dataList
          tableLoading.value = false; // 设置表格加载状态为 false
        }
        // 其他情况
        else {
          tableLoading.value = true; // 设置表格加载状态为 true
        }
      });
    }

    const columns1 = [
      {
        title: '序号',
        dataIndex: 'id',
        slots: { customRender: 'action' },
        width: 110,
        align: 'center'
      },
      {
        title: '采集时间',
        dataIndex: 'update_time',
        // width: 270,
        align: 'center'
      },
      {
        title: '卫星名称',
        dataIndex: 'sat_name',
        // width: 80,
        align: 'center'
      },
      {
        title: '中心频率',
        dataIndex: 'fc',
        // width: 160,
        align: 'center'
      },
      {
        title: '符号速率',
        dataIndex: 'rs',
        // width: 100,
        align: 'center'
      },
      {
        title: '数据类型',
        dataIndex: 'do_parsed',
        slots: { customRender: 'action3' },
        // width: 100,
        align: 'center'
      },
      {
        title: '网络信令',
        dataIndex: 'item6',
        // width: 100,
        align: 'center',
        slots: { customRender: 'action1' },
      },
      {
        title: 'ip信息',
        dataIndex: 'ip_info',
        slots: { customRender: 'action5' },
        // width: 100,
        align: 'center'
      },
      {
        title: '文件路径',
        dataIndex: 'output_path',
        align: 'center'
      },
      {
        title: '研判',
        dataIndex: 'desc',
        align: 'center',
        slots: { customRender: 'action4' },
      },
      {
        title: '数据摘要',
        dataIndex: 'process_log',
        slots: { customRender: 'action2' },
        // width: 100,
        align: 'center'
      },
      {
        title: '处理',
        dataIndex: 'process_log1',
        slots: { customRender: 'action6' },
        // width: 100,
        align: 'center'
      },
    ];
    const dataList1 = ref([
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
    ]);
    const tablePageData1 = ref({
      pageIndex: 1,
      pageSize: 10,
      total: 0
    })

    const columns2 = [
      {
        title: '序号',
        dataIndex: 'id',
        slots: { customRender: 'actions' },
        width: 110,
        align: 'center'
      },
      {
        title: '采集时间',
        dataIndex: 'update_time',
        align: 'center'
      },
      {
        title: '卫星名称',
        dataIndex: 'sat_name',
        align: 'center'
      },
      {
        title: '中心频率',
        dataIndex: 'fc',
        align: 'center'
      },
      {
        title: '符号速率',
        dataIndex: 'rs',
        align: 'center'
      },
      {
        title: '处理方式',
        dataIndex: 'data_processing',
        align: 'center'
      },
      {
        title: '文件路径',
        dataIndex: 'output_path',
        align: 'center'
      },
      {
        title: '文件大小',
        dataIndex: 'file_size',
        align: 'center'
      },
      {
        title: '研判',
        dataIndex: 'desc',
        align: 'center',
        slots: { customRender: 'action4' },
      },
      {
        title: '数据摘要',
        dataIndex: 'process_log',
        slots: { customRender: 'action1' },
        align: 'center'
      },
      {
        title: 'ip信息',
        dataIndex: 'ip_info',
        slots: { customRender: 'action5' },
        // width: 100,
        align: 'center'
      },
      {
        title: '处理',
        dataIndex: 'process_log1',
        slots: { customRender: 'action6' },
        // width: 100,
        align: 'center'
      },
    ];
    const dataList2 = ref([
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
      // {
      //   id: '--', //中心频率
      //   update_time: '--', //Modulation
      //   sat_name: '--', //符号速率
      //   fc: '--', //信噪比
      //   rs: '--', //标准
      //   item6: '--', //Pilots
      //   output_path: '--', //编码方式
      // },
    ]);
    const tablePageData2 = ref({
      pageIndex: 1,
      pageSize: 10,
      total: 0
    })

    // 定义一个函数 sampl，用于执行采样操作并更新表格数据
    function sampl() {
      tableLoading1.value = true; // 设置表格加载状态为 true，表示正在加载数据

      // 使用 axios 发起 GET 请求，获取采样数据
      axios.get(`/api/sampl?ip=${appStore.obj.ip}&epc=${tablePageData1.value.pageSize}&cpn=${tablePageData1.value.pageIndex}`)
        .then((res) => {
          // 更新总记录数
          tablePageData1.value.total = res.data.data.result.data_count;

          // 打印响应数据和总记录数，便于调试
          console.log('res.data.data:', res.data.data);
          console.log('total:', res.data.data.result.data_count);

          // 检查响应数据中的数据长度是否大于 0
          if (res.data.data.result.data.length > 0) {
            // 如果数据长度大于 0，将数据赋值给 dataList1
            dataList1.value = res.data.data.result.data;
            // 将加载状态设置为 false，表示数据加载完成
            tableLoading1.value = false;
          }
          // 检查响应数据中的代码是否为 500 或 502
          else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
            // 如果代码为 500 或 502，将数据设置为空数组
            dataList1.value = [];
            // 将加载状态设置为 false
            tableLoading1.value = false;
          }
          // 其他情况
          else {
            // 将加载状态设置为 false，表示数据加载完成
            tableLoading1.value = false;
          }
        });
    }

    // 定义一个函数 changePage1，用于改变分页索引并重新获取采样数据
    const changePage1 = (pageIndex) => {
      tablePageData1.value.pageIndex = pageIndex; // 更新分页索引
      sampl(); // 重新调用 sampl 函数获取数据
    }

    // 定义一个函数 changePageSize1，用于改变每页显示的记录数并重新获取采样数据
    const changePageSize1 = (current, size) => {
      tablePageData1.value.pageIndex = 1; // 重置分页索引为 1
      tablePageData1.value.pageSize = size; // 更新每页显示的记录数
      sampl(); // 重新调用 sampl 函数获取数据
    }

    // 定义一个函数 rockfall，用于执行落盘操作并更新表格数据
    function rockfall() {
      tableLoading2.value = true; // 设置表格加载状态为 true，表示正在加载数据

      // 使用 axios 发起 GET 请求，获取落盘数据
      axios.get(`/api/rockfall?ip=${appStore.obj.ip}&epc=${tablePageData2.value.pageSize}&cpn=${tablePageData2.value.pageIndex}`)
        .then((res) => {
          // 更新总记录数
          tablePageData2.value.total = res.data.data.result.data_count;

          // 检查响应数据中的数据长度是否大于 0
          if (res.data.data.result.data.length > 0) {
            // 如果数据长度大于 0，将数据赋值给 dataList2
            dataList2.value = res.data.data.result.data;
            // 将加载状态设置为 false，表示数据加载完成
            tableLoading2.value = false;
          }
          // 检查响应数据中的代码是否为 500 或 502
          else if (res.data.data.result.data.code == 500 || res.data.data.result.data.code == 502) {
            // 如果代码为 500 或 502，将数据设置为空数组
            dataList2.value = [];
            // 将加载状态设置为 false
            tableLoading2.value = false;
          }
          // 其他情况
          else {
            // 将加载状态设置为 false，表示数据加载完成
            tableLoading2.value = false;
          }
        });
    }

    // 定义一个函数 changePage2，用于改变分页索引并重新获取落盘数据
    const changePage2 = (pageIndex) => {
      tablePageData2.value.pageIndex = pageIndex; // 更新分页索引
      rockfall(); // 重新调用 rockfall 函数获取数据
    }

    // 定义一个函数 changePageSize2，用于改变每页显示的记录数并重新获取落盘数据
    const changePageSize2 = (current, size) => {
      tablePageData2.value.pageIndex = 1; // 重置分页索引为 1
      tablePageData2.value.pageSize = size; // 更新每页显示的记录数
      rockfall(); // 重新调用 rockfall 函数获取数据
    }


    const checked1 = ref('')
    const typeOptions = ref([
      // {
      //   value: '1',
      //   label: 'M710A',
      //   ip: '128.23.12.4'
      // },
      // {
      //   value: '2',
      //   label: 'M650S',
      //   ip: '128.23.12.5'
      // },
    ]);
    const tabFlag = ref(true)
    // 定义一个函数 get_list，用于获取调制解调器列表并更新相关数据
    function get_list() {
      // 使用 axios 发起 GET 请求，获取调制解调器数据
      axios.get('/api/modem').then((res) => {
        // 遍历响应数据中的结果数据
        res.data.data.result.data.forEach((item) => {
          // 将每个调制解调器的信息添加到 typeOptions 数组中
          typeOptions.value.push({
            value: item.id, // 调制解调器的 ID
            label: item.mtype, // 调制解调器的类型
            ip: item.ip, // 调制解调器的 IP 地址
          });
        });

        // 将第一个调制解调器的类型赋值给 mtype 变量
        mtype.value = res.data.data.result.data[0].mtype;
        if(mtype.value == 'MT650S'){
          tabFlag.value = false
        } else {
          tabFlag.value = true
        }

        // 将第一个调制解调器的 IP 地址赋值给 appStore 对象的 ip 属性
        appStore.obj.ip = res.data.data.result.data[0].ip;
      });
    }


    // 定义一个响应式字符串变量 content，用于存储文本区域的内容
    let content = ref('');

    // 定义一个函数 save_btn，用于保存文本区域的内容并更新记录的描述
    function save_btn() {
      let textarea = document.getElementById('story'); // 获取 ID 为 'story' 的文本区域元素
      content.value = textarea.value; // 将文本区域的内容赋值给 content
      console.log(content.value, 'content-=-=-=-=-=-='); // 打印 content 的值，便于调试

      // 调用 set_resultdesc 函数，传入记录的 ID 和新的描述内容
      set_resultdesc({ rid: descId.value, desc: content.value }).then((res) => {
        // 检查响应数据中的代码是否为 200
        if (res.data.data.result.data.code == 200) {
          message.success('修改成功'); // 显示成功消息
          visible3.value = false; // 关闭第三个模态框
          sampl(); // 调用 sampl 函数，可能是用于刷新数据或执行其他操作
        } else {
          message.error(res.data.data.result.data.message); // 显示失败消息
        }
      });
    }


    // 定义一个响应式字符串变量 content2，用于存储第二个文本区域的内容
    let content2 = ref('');

    // 定义一个函数 save_btn2，用于保存第二个文本区域的内容并更新记录的描述
    function save_btn2() {
      let textarea = document.getElementById('story2'); // 获取 ID 为 'story2' 的文本区域元素
      content2.value = textarea.value; // 将文本区域的内容赋值给 content2

      // 调用 set_resultdesc 函数，传入记录的 ID 和新的描述内容
      set_resultdesc({ rid: descId.value, desc: content2.value }).then((res) => {
        // 检查响应数据中的代码是否为 200
        if (res.data.data.result.data.code == 200) {
          message.success('修改成功'); // 显示成功消息
          visible4.value = false; // 关闭第四个模态框
          rockfall(); // 调用 rockfall 函数，可能是用于刷新数据或执行其他操作
        } else {
          message.error(res.data.data.result.data.message); // 显示失败消息
        }
      });
    }


    // 定义一个响应式变量 select1，用于存储选中的值
    let select1 = ref();

    // 定义一个响应式字符串变量 mtype，用于存储调制解调器类型
    let mtype = ref('');

    // 将选中的值初始化为 appStore 对象的 type 属性，如果没有则设置为 null
    select1.value = appStore.obj.type || null;

    // 定义一个函数 changeck，用于处理 IP 和类型的变更
    function changeck(ip: string, type: string) {
      // 调用 appStore 的 setIp 方法，更新 IP 和类型
      appStore.setIp(type, ip);

      // 更新 queryParams3 的 ip 属性为 appStore 对象的 ip 属性
      queryParams3.ip = appStore.obj.ip;

      // 更新 mtype 变量为传入的类型
      mtype.value = type;

      // 根据传入的类型更新 tabFlag 的值
      if (type != 'MT710A') {
        tabFlag.value = false; // 如果类型不是 'MT710A'，则将 tabFlag 设置为 false
      } else {
        tabFlag.value = true; // 如果类型是 'MT710A'，则将 tabFlag 设置为 true
      }

      // 注释掉的代码：原本可能用于在变更后刷新数据或执行其他操作
      // sampl();
      // rockfall();
      // getList3();
    }

    let swithcLoading = ref(false)

    function close_btn() {
      dataList.value.forEach((item) => {
        if (item.stat != 0) {
          console.log(item, 'item0--0-0-0-0-')
          changeSwitch(0, item)
        }
        //  else if (item.chn_type != 0 && item.stat == 0) {
        //   changeSwitch(1,item)
        // }
      })
    }

    function open_btn() {
      dataList.value.forEach((item) => {
        if (item.stat == 0) {
          changeSwitch(1, item)
        }
        //  else if (item.chn_type != 0 && item.stat == 0) {
        //   changeSwitch(1,item)
        // }
      })
    }

    function changeSwitch(checked: any, record) {
      swithcLoading.value = true
      const originalChecked = checked;
      //saveParams.ena = checked;
      // saveParams3.chn = record.chn
      // saveParams3.status = checked;
      // saveParams3.ip = queryParams3.ip
      set_status({ chn: record.chn, status: checked != 0 ? 1 : 0, ip: queryParams3.ip })
        .then((res) => {
          if (res.data.data.result.data.code == 200) {
            message.success('采集开关切换成功！');
            getList3()
            // getchn(activeKey.value, activeType.value)
          } else {
            record.stat = originalChecked == 3 ? 0 : 3
            message.error(res.data.data.result.data.message);
          }

          //getList();
        })
        .catch((error) => {
          checked == 3 ? 0 : 3
          message.error('请求失败!',);
          // getList();
        });
    }
    let timerId1: ReturnType<typeof setInterval> | null;
    // 当组件挂载完成后执行的操作
    onMounted(() => {
      get_list(); // 调用 get_list 函数获取调制解调器列表
      getList3(); // 调用 getList3 函数获取频道列表
      sampl(); // 调用 sampl 函数获取采样数据
      rockfall(); // 调用 rockfall 函数获取落盘数据

      // 设置一个定时器，每隔 30 秒执行一次以下操作
      timerId1 = setInterval(() => {
        getList3(); // 调用 getList3 函数获取频道列表
        sampl(); // 调用 sampl 函数获取采样数据
        rockfall(); // 调用 rockfall 函数获取落盘数据
      }, 30000); // 定时器时间间隔为 30000 毫秒（30 秒）
    });

    // 当组件即将卸载前执行的操作
    onBeforeUnmount(() => {
      // 如果定时器 ID 存在，则清除定时器
      timerId1 && window.clearInterval(timerId1);
    });

    // watch(() => queryParams3.ip, (newValue) => {
    //   console.log(newValue, '搜索查询里的watch')
    // })
    watch(
      appStore.obj,
      (newValue, oldValue) => {
        sampl();
        rockfall();
        getList3()
      },
      {
        deep: true // 开启深度监听
      }
    );
    return {
      dataList,
      columns,
      dataList1,
      columns1,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      typeOptions,
      select1,
      mtype,
      getList3,
      rockfall,
      sampl,
      get_list,
      queryParams3,
      queryParams,
      appStore,
      t,
      changeck,
      columns2,
      dataList2,
      changeSwitch,
      open_btn,
      close_btn,
      tableLoading,
      tableLoading1,
      tableLoading2,
      tablePageData1,
      tablePageData2,
      tablePageData3,
      tablePageData4,
      changePage1,
      changePageSize1,
      changePage2,
      changePage3,
      changePage4,
      changePageSize2,
      changePageSize3,
      changePageSize4,
      visible,
      visible2,
      visible3,
      visible4,
      visible5,
      visible6,
      showModal6,
      showModal,
      showModal5,
      get_chn,
      get_chn2,
      chn_data,
      chn_data2,
      selectSi,
      outType,
      bbfData,
      delbinData,
      polarData,
      directData,
      hdlcTypeData,
      dataProcessingData,
      tableLoading5,
      showModal2,
      icon_btn,
      icon_btn2,
      showModal3,
      showModal4,
      descId,
      textareaData,
      textareaData2,
      computedValue,
      record_content,
      handleOk,
      handleOk2,
      outsetParams,
      chnsetParams,
      savesetParams,
      tableData,
      tableData2,
      columns3,
      columns4,
      str,
      swithcLoading,
      afterClose,
      save_btn,
      save_btn2,
      searchInput,
      ...toRefs(state),
      handleSearch,
      handleReset,
      parsing,//解析
      parsingLoading,//解析loading状态
      tabFlag,
      checked1,
    };
  },
});
</script>

<style lang="less" scoped>
.spane1 {
  color: #0960bd;
  cursor: pointer;
}

.list1 {
  padding: 20px 0;
}

.content1 {
  padding: 15px 0;
  text-indent: 24px;
}

.hh1 {
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}

.dd1 {
  line-height: 34px;
}

.dd2 {
  line-height: 34px;
  text-indent: 24px;
}

.dd3 {
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}

.coll1 {
  margin-bottom: 50px;
}

.table1 {
  border: 1px solid #fff;
}

::v-deep .ant-select-selector {
  color: #fff;
}

::v-deep {
  .ant-pagination-total-text {
    color: #fff !important;
  }

  .ant-pagination-options-quick-jumper {
    color: #fff !important;
  }

  .ant-pagination-item-ellipsis {
    color: #fff !important;
  }
}

::v-deep .ant-tabs-extra-content {
  width: auto;
  display: flex;
}

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #000;
}

textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  height: 300px;
  width: 400px;
}

label {
  display: block;
  margin-bottom: 10px;
}

.custom-placeholder::placeholder {
  color: #000 !important;
  /* 你想要的颜色 */
}

.titlea1 {
  width: 100%;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin: 10px 0 20px 0;
}

.ant-row span {
  color: #fff;
}

.table_div {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
}

.table_div div {
  width: 16%;
  display: flex;
  margin-top: 10px;
  font-size: 13px;
  margin-left: 10px;
}

// .table_div div p{
//   margin-left: 50px;
// }

.table_div div span {
  margin-left: 5px;
}
</style>
